<template>
	<view class="integral">
		<view class="top">
			<view class="numberBox flex">
				<view class="number">{{userInfo.score}}</view>
				<text class="f28 cf ml8 jifen">积分</text>
			</view>
			<view class="numberBox1 flex_y_center">
				<view class="flex1 jfgz" @click="btns('积分规则')"></view>
			</view>
			<view class="numberBox2 flex">
				<view class="textbtns" @click="btns('兑换记录')"></view>
				<view class="textbtns" @click="btns('积分明细')"></view>
			</view>
		</view>
		<u-tabs active-color='#FD5241' :list="listTbs" bg-color='transparent' :is-scroll="false" v-model="currentTabs"
			@change="changeTabs"></u-tabs>
		<scroll-view :scroll-y="true" class="scrollBox" @scrolltolower="shopList" lower-threshold="200" scroll="scroll"
			style="touch-action: none;">
			<view class="flex-wrap flex_sb">
				<view class="forbox" v-for="(item,index) in Shop" :key="index" @click="btns('详情',item)">
					<image class="imgs" :src="$wanlshop.oss(item.image)" mode=""></image>
					<view class="overflow_1 c3d f28">
						{{item.title}}
					</view>
					<view class="flex_sb asdz mt12">
						<view class="cfa750c f32 fb">
							{{item.price}} 积分
						</view>
						<view class="info f24">
							库存 {{item.stock}}
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType" :content-text="contentText" />
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				listTbs: [{
						name: '全部商品'
					},
					{
						name: '我能兑换'
					},
				],
				currentTabs: 0,
				current_page: 1,
				Shop: [],
				userInfo: {},
				goodsType: 0,
				loadingType: '',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
			};
		},
		onLoad() {
			this.shopList()
			this.userScore() // 用户积分
		},
		methods: {
			changeTabs(index) {
				console.log(index);
				if (index == 0) {
					this.Shop = []
					this.current_page = 1
					this.loadingType = ''
					this.goodsType = 0
					this.shopList()
					return
				}
				if (index == 1) {
					this.Shop = []
					this.current_page = 1
					this.loadingType = ''
					this.goodsType = 1
					this.shopList()
					return
				}

			},
			btns(key, data) {
				if (key == '兑换记录') {
					this.$wanlshop.to(`/pages/user/integral/exchange`)
					return
				}
				if (key == '积分明细') {
					this.$wanlshop.to('/pages/user/integral/detail')
					return
				}
				if (key == '积分规则') {
					this.$wanlshop.to('/pages/article/details?title=积分规则&id=8')
					return
				}
				if (key == '详情') {
					this.$wanlshop.to(`/pages/user/integral/integralDetail?id=${data.id}`)
					return
				}
			},
			shopList() {
				if (this.loadingType == 'noMore') {
					return;
				}
				this.$api.get({
					url: "/wanlshop/score/goodsList",
					data: {
						type: this.goodsType,
						page: this.current_page,
						limit: 10,
					},
					success: res => {
						if (res.last_page <= res.current_page) {
							this.loadingType = 'noMore';
						} else {
							this.loadingType = 'more';
							this.current_page++;
						}
						this.Shop = this.Shop.concat(res.data)
					}
				})
			},
			userScore() {
				this.$api.get({
					url: "/jmy/user/score",
					data: {},
					success: res => {
						this.userInfo = res
					}
				})
			},

		},
	};
</script>

<style lang="scss" scoped>
	.integral {
		padding: 22rpx;
		height: 100vh;
		overflow-y: scroll;

		.cfa750c {
			color: #FA750C;
		}
		.asdz{
			align-items: flex-end;
		}
		.scrollBox {
			height: calc(100vh - 90rpx);

			.forbox {
				background: #FFFFFF;
				padding: 22rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-top: 20rpx;
			}

			.imgs {
				border-radius: 12rpx;
				width: 300rpx;
				height: 300rpx;
			}
		}

		.top {
			background-image: url('https://img.aibbyp.com/wechatUser/jfbj.png');
			background-size: 100% 418rpx;
			width: 100%;
			height: 418rpx;
			padding: 2rpx 60rpx;
			box-sizing: border-box;
			position: relative;

			.number {
				font-weight: 400;
				font-size: 80rpx;
				color: #FFFFFF;
			}

			.numberBox {
				margin-top: 106rpx;

				.jifen {
					margin-top: 54rpx;
				}
			}

			.numberBox1 {
				margin-top: 40rpx;

				.jfgz {
					height: 40rpx;
					min-width: 200rpx;
				}
			}

			.number1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.numberBox2 {
				position: absolute;
				bottom: 0;
				width: calc(100% - 120rpx);
				height: 108rpx;
				box-sizing: border-box;

				.textbtns {
					width: 50%;
					height: 100%;
				}
			}
		}
	}
</style>